<template>
  <div class="transfer-container">
    <template v-if="!$store.state.userModule.isLogin">
      <div class="need-login-tip">
        <div class="iconfont icon-person need-login-icon"></div>
        <div class="need-login-text">
          <span>点击 </span>
          <a class="link" target="_blank" href="https://passport.jd.com/new/login.aspx"
            >登录京东</a
          >
          <span>后刷新本页面查看</span>
        </div>
        <div class="desc">
          （免责说明：使用本功能没有进行任何抽佣，订单跟不到，咨询京东客服）
        </div>
      </div>
    </template>
    <template v-else>
      <div class="transfer-content">
        <div class="jtt-clearfix">
          <div class="jtt-fl">
            <img
              class="product-img"
              :src="
                productImgs[productImgIndex] &&
                productImgs[productImgIndex].originSrc
              "
              alt=""
              id="mainImg"
            />
            <div class="product-img-total jtt-vertical-middle">
              <span
                class="left-arrow iconfont icon-arrow-left mr-12"
                @click="scrollImgBar('remove')"
              ></span>
              <div ref="productImgs" class="product-imgs">
                <img
                  :class="{ 'product-img-selected': index == productImgIndex }"
                  @click="changeImg(index)"
                  class="product-mini-img"
                  :src="item.src"
                  alt=""
                  :key="index"
                  v-for="(item, index) in productImgs"
                />
              </div>
              <span
                class="right-arrow iconfont icon-arrow-right ml-12"
                @click="scrollImgBar('add')"
              ></span>
            </div>
          </div>
          <div class="jtt-fr">
            <pre id="keyChainContainer" class="pre-text" v-html="actical"></pre>
            <button
              class="key-copy-button"
              id="copyButton"
              @click="aKeyCopy"
            >
              <span class="key-icon iconfont icon-copy-transfer"></span>
              <span class="copy-btn-text">一键复制</span>
            </button>
          </div>
        </div>
      </div>
    </template>
    <foot></foot>
  </div>
</template>

<script>
import util from "../util/animation.js";
export default {
  data() {
    return {
      actical: "",
      productImgIndex: 0,
      scrollIndex: 0,
      transferText: "aaaaa",
      productImgs: [],
    };
  },
  methods: {
    searchImgs() {
      this.productImgs = Array.from(
        document.querySelectorAll("#preview #spec-list img")
      ).map((item) => ({
        src: item.src,
        originSrc:
          "https://img12.360buyimg.com/n5/s500x500_" + item.dataset.url,
      }));
    },
    aKeyCopy() {
       this.$copyText(this.actical).then(()=>{
         alert("复制成功");
       });
    },
    createArtical(data) {
      this.actical = `
      ${this.$store.state.productInfo.unionGoods[0][0].skuName}

      京东价:${this.$store.state.productInfo.unionGoods[0][0].wlPrice}
      券后价:${this.$store.state.productInfo.unionGoods[0][0].finalPrice}
      ${
        data.couponShortCode
          ? `
         领券：${data.couponShortCode}
        `
          : `
        `
      }
      抢购:${data.shortCode}
      `;
    },
    changeImg(index) {
      this.productImgIndex = index;
    },
    scrollImgBar(type) {
      switch (type) {
        case "remove":
          if (this.scrollIndex > 0) {
            this.scrollIndex--;
            util.scrollAnimation(this.$refs.productImgs, -192, "scrollLeft");
          }
          break;
        case "add":
          if (Math.ceil(this.productImgs.length / 4) > this.scrollIndex + 1) {
            this.scrollIndex++;
            util.scrollAnimation(this.$refs.productImgs, 192, "scrollLeft");
          }
          break;
      }
    },
  },
  mounted() {
    this.$store.commit("userModule/chargeIsLogin");
    //如果已登入京东
    if (this.$store.state.userModule.isLogin) {
      this.$store.dispatch("efficientTransfer").then((res) => {
        this.createArtical(res);
      });
      this.searchImgs();
    }
  },
};
</script>

<style lang="less" scoped>
.transfer-container {
  min-height: 100px;
  .need-login-tip {
    .need-login-icon {
      font-size: 48px;
      width: 48px;
      line-height: 48px;
      height: 48px;
      margin: 0 auto;
    }
    .need-login-text {
      margin-top: 14px;
      font-size: 12px;
      color: rgba(67, 67, 67, 1);
      text-align: center;
      .link {
        margin: 0 4px;
        color: rgba(245, 45, 54, 1);
      }
    }
    .desc {
      margin-top: 11px;
      text-align: center;
      font-size: 12px;
      color: rgba(153, 153, 153, 1);
    }
  }
  .transfer-content {
    padding: 16px;
    background: #fcfcfc;
    border-radius: 4px;
    .product-img {
      display: block;
      width: 242px;
      height: 242px;
      border-radius: 4px;
    }
    .product-img-selected {
      border: 1px solid #f52d36;
    }
    .product-img-total {
      margin-top: 11px;
      .left-arrow,
      .product-imgs,
      .right-arrow {
        display: inline-block;
        vertical-align: middle;
      }
      .left-arrow,
      .right-arrow {
        font-size: 24px;
        cursor: pointer;
      }
      .ml-12 {
        margin-left: 12px;
      }
      .mr-12 {
        margin-right: 12px;
      }
      .product-imgs {
        width: 184px;
        overflow-x: auto;
        white-space: nowrap;
        height: 40px;
        transition: all 0.3s ease;
        &::-webkit-scrollbar {
          display: none;
        }
        .product-mini-img {
          margin-right: 8px;
          width: 40px;
          height: 40px;
          border-radius: 4px;
          box-sizing: border-box;
          cursor: pointer;
          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
    .pre-text {
      padding-top: 12px;
      width: 234px;
      height: 234px;
      overflow-y: auto;
      white-space: pre-line;
    }
    .key-copy-button {
      outline: none;
      border: none;
      padding: 0;
      margin: 11px auto;
      display: block;
      width: 124px;
      height: 36px;
      background: linear-gradient(-90deg, #ff6269, #f52d36);
      border-radius: 18px;
      .span {
        display: inline-block;
        vertical-align: middle;
      }
      .key-icon {
        color: #ffffff;
        margin-right: 11px;
        font-size: 18px;
      }
      .copy-btn-text {
        font-size: 14px;
        font-weight: 400;
        color: #ffffff;
      }
    }
  }
}
</style>